<template>
    <div class="bigBox">
        <div class="flex">
            <el-table :data="tableDat1" border style="width: 100%">
                <el-table-column prop="name" label="名称" align="center" />
                <el-table-column label="优惠券类型" align="center">
                    <template #default="scope">
                        {{ type(scope.row.type) }}
                    </template>
                </el-table-column>
                <el-table-column label="可使用商品" align="center">
                    <template #default="scope">
                        {{ useType(scope.row.useType) }}
                    </template>
                </el-table-column>
                <el-table-column label="使用门槛" align="center">
                    <template #default="scope">
                        {{ "满" + scope.row.minPoint + "元可用" }}
                    </template>
                </el-table-column>
                <el-table-column label="面值" align="center">
                    <template #default="scope">
                        {{ scope.row.amount + "元" }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="scope">
                        {{ new Date(scope.row.endTime).getTime() < new Date().getTime() ? "已过期" : "未过期" }} </template>
                </el-table-column>
            </el-table>
            <el-table :data="tableDat1" border style="width: 100%">
                <el-table-column label="有效期" align="center">
                    <template #default="scope">
                        {{ fomatDate(scope.row.startTime) + "至" + fomatDate(scope.row.endTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="publishCount" label="总发行量" align="center" />
                <el-table-column prop="receiveCount" label="已领取" align="center" />
                <el-table-column label="待领取" align="center">
                    <template #default="scope">
                        {{ parseInt(scope.row.publishCount) - parseInt(scope.row.receiveCount) }}
                    </template>
                </el-table-column>
                <el-table-column prop="useCount" label="已使用" align="center" />
                <el-table-column label="未使用" align="center">
                    <template #default="scope">
                        {{ parseInt(scope.row.publishCount) - parseInt(scope.row.useCount) }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="search_box">
            <div class="flexbox">
                <div>
                    <el-icon>
                        <Search />
                    </el-icon><span>筛选搜索</span>
                </div>
                <div>
                    <el-button @click="resetForm">重置</el-button>
                    <el-button type="primary" @click="search">搜索</el-button>
                </div>
            </div>
            <div class="search">
                <el-form :inline="true" ref="searchFormRef" :model="params">
                    <el-form-item label="使用状态：" prop="useStatus">
                        <el-select v-model="params.useStatus" placeholder="全部">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单编号：" prop="orderSn">
                        <el-input type="text" v-model="params.orderSn" placeholder="订单编号" class="input" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="couponCode" label="优惠券" />
                <el-table-column prop="memberNickname" label="领取会员" />
                <el-table-column label="领取方式">
                    <template #default="scope">
                        {{ scope.row.getType === 0 ? "后台赠送" : "主动获取" }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="领取时间">
                    <template #default="scope">
                        {{ fomatDate(scope.row.createTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="当前状态">
                    <template #default="scope">
                        {{ UseStatus(scope.row.useStatus) }}
                    </template>
                </el-table-column>
                <el-table-column label="使用时间"></el-table-column>
                <el-table-column prop="orderSn" label="订单编号" />
            </el-table>
        </div>
        <div class="right">
            <ElConfigProvider :locale="zhCn">
                <el-pagination v-model:currentPage="pageNum" v-model:page-size="pageSize" background
                    layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChange"
                    @current-change="pageNumChange" :page-sizes="[10, 20, 50, 100]" />
            </ElConfigProvider>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { user } from "@/api"
import { reactive, ref } from "vue";
import { useRoute } from "vue-router"
import { Search } from "@element-plus/icons-vue";
import { useTable } from "@/hooks/useTable"
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider, FormInstance } from "element-plus";
import { fomatDate } from "@/utils/index"

const route = useRoute()

const searchFormRef = ref<FormInstance>();

const resetForm = () => {
    searchFormRef.value?.resetFields();
};

let tableDat1 = reactive([])

// 搜索的数据
const params = reactive({
    orderSn: "",
    useStatus: "",
    couponId: route.query.id
})

const {
    tableData,
    pageNum,
    pageSize,
    total,
    pageNumChange,
    pageSizeChange,
    search
} = useTable(user.couponHistoryApi, params);

const options = [
    {
        value: 0,
        label: '未使用',
    },
    {
        value: 1,
        label: '已使用',
    },
    {
        value: 2,
        label: '已过期',
    }
]

// interface Istate{
//     arr:约束类型[]
// }
// const state=reactive<Istate>({
//     arr:[]
// })

if (route.query.id) {
    user.couponDetailed(parseInt(String(route.query.id))).then(res => {
        if (res.code === 200) {

            Object.assign(tableDat1, [res.data])
        }
    })
}

// 优惠券的状态
const UseStatus = (val: number) => {
    if (val === 0) {
        return "未使用"
    } else if (val === 1) {
        return "已使用"
    } else if (val === 2) {
        return "已过期"
    }
}

// 优惠券的类型
const type = (val: number) => {
    if (val === 0) {
        return "全场赠券"
    } else if (val === 1) {
        return "会员赠券"
    } else if (val === 2) {
        return "购物赠券"
    } else if (val === 3) {
        return "注册赠券"
    }
}

const useType = (val: number) => {
    if (val === 0) {
        return "全场通用"
    } else if (val === 1) {
        return "指定分类"
    } else if (val === 2) {
        return "指定商品"
    }
}

</script>
<style lang="less" scoped>
.bigBox {
    width: 1270px;
    margin: 0 auto;
}

.flex {
    width: 1260px;
    margin: 0 auto;
}

.search_box {
    padding: 20px 70px;
    border: 1px solid #ccc;
    margin: 20px 0;
    border-radius: 5px;

    .flexbox {
        display: flex;
        justify-content: space-between;
        color: #000;
    }

    .input {
        height: 30px;
    }

    .search {
        margin: 20px 0 0 72px;
    }
}

.right {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>